<template>
  <view class="login-wrapper">
    <view class="login-text">登录</view>
    <view class="user-wrapper">
      <view class="phone">手机号</view>
      <input
        type="text"
        placeholder="请输入手机号"
        v-model="user.phone"
        placeholder-style="color:#999999;font-size:28upx;font-weight: 500;"
      />
    </view>
    <view class="passaord-wrapper">
      <view class="password">密码</view>
      <input
        type="password"
        placeholder="请输入密码"
        v-model="user.password"
        maxlength="8"
        placeholder-style="color:#999999;font-size:28upx;font-weight: 500;"
      />
    </view>
    <view class="flex-wrapper flex">
      <view @tap="navTo('/pages/public/register')">我要注册</view>
      <view @tap="navTo('/pages/public/password')">忘记密码 </view>
    </view>
    <view class="btn-wrapper">
      <button type="warn" @tap="handletap">登录</button>
    </view>
    <view class="img" @tap="wxLogin">
      <image mode="aspectFill" :src="wxImg"></image>
      <view> 微信登录 </view>
    </view>
  </view>
</template>
<script>
import { loginByPass } from "@/api/login";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      reqBody: {},
      wxImg: this.$mAssetsPath.wxImg,
    };
  },
  onShow() {
    // if (this.$mStore.getters.hasLogin) {
    //   this.$mRouter.reLaunch({ route: "/pages/index/index" });
    // }
  },
  onLoad(options) {},
  methods: {
    async handletap() {
      this.reqBody["phone"] = this.user["phone"];
      this.reqBody["password"] = this.user["password"];
      const cheRes = this.$mGraceChecker.check(
        this.reqBody,
        this.$mFormRule.loginByPassRule
      );
      if (!cheRes) {
        this.$mHelper.toast(this.$mGraceChecker.error);
        return;
      }
      await this.$http
        .post(loginByPass, this.reqBody)
        .then((r) => {
          this.$mHelper.toast("恭喜您，登录成功！");
          this.$mStore.commit("login", r.data);
          this.$mRouter.push({ route: "/pages/profile/profile" });
        })
        .catch(() => {});
    },
    navBack() {
      this.$mRouter.back();
    },
    // 通用跳转
    navTo(route) {
      this.$mRouter.push({ route });
    },
    //微信登录
    wxLogin() {
      let _self = this;
      uni.login({
        provider: 'weixin',
        success: (res) => {
          uni.getUserInfo({
            provider: 'weixin',
            success: (info) => {
              let data = {
                nickName: info.userInfo.nickName,
                avatarUrl: info.userInfo.avatarUrl,
                gender: info.userInfo.gender,
                country: info.userInfo.country,
                province: info.userInfo.province,
                city: info.userInfo.city,
                openId: info.userInfo.openId,
              };
              _self.wxLoginfun(data);
            },
            fail: () => {
              uni.showToast({ title: "微信登录授权失败" });
            },
          });
        },
        fail: () => {
          uni.showToast({ title: "微信登录授权失败" });
        },
      });
    },
    async wxLoginfun(info) {
      await this.$http
        .post(loginByPass, info)
        .then((r) => {
          this.$mHelper.toast("恭喜您，登录成功！");
          this.$mStore.commit("login", r.data);
          this.$mRouter.push({ route: "/pages/profile/profile" });
        })
        .catch((e) => {
          console.log(e)
        });
    },
  },
};
</script>
<style lang="scss" scoped>
$textColor: #333333;
page {
  background: #fff;
}
.login-wrapper {
  background: #fff;
  height: 100vh;
  .login-text {
    padding-top: 120upx;
    padding-left: 30upx;
    font-size: 48upx;
    font-weight: bold;
    color: $textColor;
  }
  .user-wrapper {
    margin: 90upx 30upx 0 30upx;
    font-weight: bold;
    color: $textColor;
    padding: 16upx 0;
    border-bottom: 1upx solid #eeeeee;
    .phone {
      margin-bottom: 30upx;
    }
  }
  .passaord-wrapper {
    margin: 45upx 30upx 0 30upx;
    font-weight: bold;
    color: $textColor;
    font-weight: bold;
    padding: 16upx 0;
    border-bottom: 1upx solid #eeeeee;
    .password {
      margin-bottom: 28upx;
    }
  }
  .flex-wrapper {
    padding: 26upx 30upx;
    font-size: 24upx;
    font-weight: 500;
    color: #326130;
  }
  .btn-wrapper {
    padding: 100upx 30upx 0 30upx;
    uni-button {
      border-radius: 40upx;
      background: #f91c1c;
    }
  }

  .img {
    width: 100%;
    margin-top: 116upx;
    text-align: center;
    font-size: 24upx;
    font-weight: 500;
    color: #333333;
    image {
      width: 90upx;
      height: 90upx;
    }
  }
}
</style>
